<template>
  <t-loading :loading="loading">
    <div class="parent-box">
      <DydEditor v-model="Description" :Descriptions="Description" v-if="!loading"></DydEditor>
      <div class="hw-tip">
        您可以编辑策展团队信息，建议包含主办单位、协办单位、承办单位、支持单位、指导单位、策展人、执行人等信息。
      </div>
      <div class="gratitude" v-if="gratitudeText">
        <span> 特别鸣谢单位</span>
        <t-tooltip
          content="默认为本展使用平台公有库展品的所有者（本单位除外），以感谢展品所有单位提供数据。"
          trigger="hover"
          overlay-class-name="gratitude-popup"
        >
          <div id="error-icon">
            <t-icon size="16" name="error-circle" class="error-icon"></t-icon>
          </div>
        </t-tooltip>
      </div>
      <div class="gratitude-text" v-if="gratitudeText">
        <!-- <t-input v-model="inputValue" placeholder="请输入特别鸣谢单位" /> -->
        <span>{{ gratitudeText }}</span>
      </div>
      <t-row>
        <t-col :span="12">
          <div class="hw-flex-style-c-a-r">
            <t-button size="large" @click="save" :loading="loadingBtn"> 保存 </t-button>
          </div>
        </t-col>
      </t-row>
    </div>
  </t-loading>
</template>

<script setup lang="ts">
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import { teamContentSave, teamContentInfo } from '@/api/templates/templates';
import { ref, reactive } from 'vue';
import DydEditor from '@/components/RichText/Editor.vue';

const Description = ref('');
const gratitudeText = ref('');
const inputValue = ref('');
const loading = ref(true);
const loadingBtn = ref(false);
const init = async () => {
  try {
    let { data } = await teamContentInfo(localStorage.getItem('projectId'));
    if (data.text) {
      Description.value = data.text;
    }
    gratitudeText.value = data.value;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const save = async () => {
  loadingBtn.value = true;
  let { statusCode } = await teamContentSave({
    value: localStorage.getItem('projectId'),
    text: Description.value,
  });
  if (statusCode == 200) {
    MessagePlugin.success('保存成功');
  }
  loadingBtn.value = false;
};
init();
</script>

<style lang="less" scoped>
:deep(.t-loading__parent) {
  height: calc(100% - 64px) !important;
}

.parent-box {
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  min-height: calc(100vh - 400px);
  height: calc(100%);
  padding: 0 24px;
  overflow: auto;

  :deep(.tinymce-boxz) {
    height: 90%;
  }
  :deep(.tox-tinymce) {
    height: 100% !important;
  }
}
.hw-tip {
  line-height: 20px;
  color: rgba(154, 154, 154, 1);
  font-size: 16px;
  text-align: left;
  margin-top: 13px;
}
.gratitude {
  display: flex;
  align-items: center;
  line-height: 20px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  text-align: left;
  margin-top: 24px;
  margin-bottom: 8px;
  .error-icon {
    color: rgba(154, 154, 154, 1);
    margin-left: 6px;
  }
}
#error-icon {
  :deep(.t-popup) {
    width: 315px;
    left: -30px !important;
  }
}
.gratitude-text {
  > span {
    display: inline-block;
    padding: 8px;
    line-height: 23px;
    border-radius: 3px;
    background-color: rgba(239, 239, 239, 1);
    color: rgba(0, 0, 0, 0.26);
    font-size: 16px;
    text-align: left;
    border: 1px solid rgba(187, 187, 187, 1);
    padding: 8px 16px;
  }
}
:deep(#w-e-textarea-1) {
  padding: 0px 16px;
  p {
    margin: 12px 0;
  }
}
</style>
